<%@page contentType="text/html; UTF_8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
    <script src="${pageContext.request.contextPath}/back/statics/js/jquery-1.8.3.min.js"></script>
</head>
<body>

<!--container-fluid代表bootstrap给我们的一个容器-->
    <div class="container-fluid">
        <!--用户注册-->
        <!--row代表要用当前的一行，总共有12列-->
        <div class="row">
            <!--
            col-sm-6:代表让整个的表单占6列，
            col-sm-offset-3:代表让整个表单向右偏移三列，目的是为了让表单居中显示。
            -->
            <div class="col-sm-6 col-sm-offset-3">
                <!--text-center：文本居中-->
                <h1 class="text-center">用户注册</h1>
            </div>
        </div>

        <!--完成表单-->
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <form id="regForm">
                    <div class="form-group">
                        <!--
                        for的数据代表input里的id数据，placeholder代表提示信息,
                        type代表文本类型：text文字可见，password文字不可见
                        name代表web端传过来的属性值
                        -->
                        <label for="name">用户名：</label>
                        <input type="text" class="form-control" name="name" id="name" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码：</label>
                        <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label for="role">角色选择：</label>
                        <select class="form-control" name="role" id="role">
                            <option value="">请选择</option>
                            <option value="admin">管理员</option>
                            <option value="student">学生</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="code">验证码：</label>
                        <div>
                            <input type="text" name="code" class="form-control" style="height:40px; width: 70%; float: left" id="code" placeholder="请输入验证码">
                            <img src="${pageContext.request.contextPath}/user/getImage" id="image" style="float: right;" alt="">
                        </div>
                    </div>
                    <!--class="btn btn-danger":btn代表按钮， btn-danger代表按钮的颜色，这个是红色-->
                    <button type="button" id="regBtn" class="btn btn-danger" style="margin-top:20px; width: 47%; margin-left: 10px">立即注册</button>
                    <a class="btn btn-info" href="${pageContext.request.contextPath}/back/login.jsp" style="margin-top:20px; width: 47%; margin-left: 30px">返回登录</a>
                </form>

            </div>
        </div>
    </div>

</body>
</html>

<script>
    $(function () {

        // 注册
        $("#regBtn").click(function () {
            // 发ajax请求
            // 参数依次是到后台controller的路径、表单序列化、res是回调函数
            $.post("${pageContext.request.contextPath}/user/register",$("#regForm").serialize(),function (res) {
                console.log(res);
                if (res.status) {
                    alert(res.msg + "，点击确定跳转至登录页面");
                    // location.href 指定跳转到其他页面的路径
                    location.href = "${pageContext.request.contextPath}/back/login.jsp";
                } else {
                    alert(res.msg);
                }
            });

        });

        // 更换验证码
        // 给点击验证码绑定单击事件，每次点击重新发送请求，因为浏览器有缓存，所以每次点击刷新验证码之前需要清楚浏览器缓存，
        // 对此我们可以讲请求路径后面加上一个id随机数，通过Math.random()来实现，这样我们每次发送的请求路径都不同，但都会去
        // 访问获取验证码图片这个方法。
        $("#image").click(function () {
            $(this).attr("src","${pageContext.request.contextPath}/user/getImage?id="+Math.random());
        });
    })
</script>